<template>
  <section class="page">
    <!-- 标题 -->
    <div class="title">
      <div>{{ propsForm.title }}</div>
      <div>订&nbsp;购&nbsp;单</div>
    </div>
    <!-- 表单字段 -->
    <div class="form">
      <div style="position:absolute;top:-1.5em;">季&emsp;节：{{ propsForm.season }}</div>
      <div class="form-row">
        <div>厂&emsp;商：{{ propsForm.fullnmTC }}</div>
        <div>传真：{{ propsForm.vrFax }}</div>
        <div>采购单号：{{ propsForm.orderNo }}</div>
      </div>
      <div class="form-row">
        <div class="form-long-item">负责人：{{ propsForm.link }}</div>
        <div>订购日期：{{ (propsForm.ordDate || '').slice(0, 10) }}</div>
      </div>
      <div class="form-row">
        <div>电&emsp;话：{{ propsForm.vrTel }}</div>
        <div>客户：{{ propsForm.client }}</div>
        <div>交货地点：{{ propsForm.place }}</div>
      </div>
    </div>
    <!-- 表格 -->
    <table style="width: 100%" border="1" cellspacing="0">
      <thead>
        <tr class="text-center bg-color">
          <th class="table-col-short">序</th>
          <th class="table-col">材料编码</th>
          <th>材料名称</th>
          <th class="table-col-short">单位</th>
          <th class="table-col-short">数量</th>
          <th class="table-col">单价</th>
          <th class="table-col">金额</th>
          <th class="table-col">交期</th>
          <th class="table-col">材料备注</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in propsForm.detailList">
          <tr :key="index">
            <td class="text-center">
              {{ item.orderSeq }}
            </td>
            <td>
              {{ item.itemNo }}
            </td>
            <td class="text-left">
              {{ item.itemName }}
            </td>
            <td class="text-center">
              {{ item.unit }}
            </td>
            <td class="text-right">
              {{ item.ordQty }}
            </td>
            <td class="text-right">
              {{ $util.formatPrice(item.price) }}
            </td>
            <td class="text-right">
              {{ $util.formatPrice(item.price * item.ordQty, 2) }}
            </td>
            <td class="text-center">
              {{ (item.planDate || '').slice(0, 10) }}
            </td>
            <td class="text-right">
              {{ item.remark }}
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="3" style="border-right: none"></td>
          <td style="border-left: none; border-right: none">
            <span style="position: relative; left: 0.8em">共计：</span>
          </td>
          <td class="text-right" style="border-left: none; border-right: none">
            {{ total }}
          </td>
          <td class="text-right" style="border-left: none; border-right: none">
          </td>
          <td class="text-right" style="border-left: none; border-right: none">
            {{ $util.formatPrice(allTotal) }}
          </td>
          <td colspan="3" style="border-left: none"></td>
        </tr>
      </tbody>
    </table>
    <div class="base-stamp">
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__header table-flow">
        <thead class="has-gutter">
          <tr class="text-left">
            <th><div class="examine-cell">签核角色</div></th>
            <th><div class="examine-cell">审核人员</div></th>
            <th><div class="examine-cell">审核状况</div></th>
            <th><div class="examine-cell">审核意见</div></th>
            <th><div class="examine-cell">审核时间</div></th>
          </tr>
        </thead>
        <tbody>
          <template >
            <tr class="text-left" v-for="(item, index) in (propsForm.qhChkmgrdList || [])" :key="index">
              <td><div>{{item.flowDesc}}</div></td>
              <td><div>{{item.toUserCname}}</div></td>
              <td><div>{{item.chkStatusName}}</div></td>
              <td><div>{{item.chkOk}}</div></td>
              <td><div>{{item.chkDate}}</div></td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <div class="desc">
      <div>附注：1.送货单请标示订购单号及工作单号以利本公司系统付款。</div>
      <div>&emsp;&emsp;&emsp;2.请接单24小时内确认交期，未确认者视同接受，下单48小时内买方有权取消订单。如因交期延迟由卖方负责赔偿买方损失。</div>
      <div>&emsp;&emsp;&emsp;3.本公司不同意超交（皮料/PU/布类超交范围以报价单为准），如有特殊状况需经我方同意，否则一律不付款。</div>
      <div>&emsp;&emsp;&emsp;4.所交货物需达到各对应品牌所要求物牲要求及欧盟有害物质限制标准。</div>
      <div>&emsp;&emsp;&emsp;5.当月货款需在当月20号内提供送货单/订购单/请款明细/报价单给我厂请款，逾期一律不予安排。</div>
      <div>&emsp;&emsp;&emsp;6.如有新材料请于48小时内提供量产报价单。</div>
      <div>&emsp;&emsp;&emsp;7.如因贵司材料品质问题与进度问题导致订单延期均由供应商承担所有损失！</div>
    </div>
  </section>
</template>

<script>
module.exports = {
  props: {
    propsForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      parameterData: JSON.parse(sessionStorage.getItem('parameterData'))
    }
  },
  computed: {
    total() {
      const list = this.propsForm.detailList;
      const total = list.reduce((pre, cur) => {
        pre += +cur.ordQty;
        return pre;
      }, 0);
      return +total.toFixed(2);
    },
    allTotal() {
      const list = this.propsForm.detailList;
      const total = list.reduce((pre, cur) => {
        pre += +(cur.ordQty * cur.price);
        return pre;
      }, 0);
      return +total.toFixed(2);
    }
  },
};
</script>

<style scoped>
section {
  --border: 1px solid #000;
  --bg-color: #b3ffb3;
}

.page {
  margin: auto;
  font-size: 14px;
  max-width: 297mm;
  width: 100%;
}

.title {
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.form {
  margin-bottom: 0.5em;
  position: relative;
  font-weight: 600;
}
.form-row {
  display: flex;
  justify-content: space-between;
  line-height: 1.8;
}
.form-row > div {
  text-align: left;
  flex-basis: 33.3%;
}
.form-long-item {
  flex-basis: 66.6% !important;
}

table {
  font-size: 14px;
}
table th,
td {
  padding: 4px;
}
.table-col-short {
  min-width: 3em;
}
.table-col {
  min-width: 6em;
}

.foot {
  margin: 3em 0;
}
.foot-row {
  display: flex;
  justify-content: space-between;
}
.foot-row > div > div {
  width: 1em;
}

.desc {
  margin-top: 3em;
}
.desc div {
  text-align: left;
  line-height: 1.6;
}

/* commom */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.bg-color {
  background-color: var(--bg-color);
}
.base-stamp {
  margin-top: 3em;
}
</style>